<template>
  <div class="business">
    <el-card>
      <el-form :model="form" inline ref="form">
        <el-form-item prop="eid" label="企业编号">
          <el-input v-model="form.eid"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="企业名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="创建者">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-select placeholder="请选择" v-model="form.status">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">清除</el-button>
          <el-button type="primary" @click="add">+新增企业</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="list">
        <el-table-column label="序号" width="50px">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业编号" prop="eid" width="90px">
        </el-table-column>
        <el-table-column label="企业名称" prop="name"> </el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="状态" width="100px">
          <template v-slot="scope">
            {{ scope.row.status == 0 ? '禁用' : '启用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="edit(scope.row)"> 编辑 </el-button>
            <el-button type="text" @click="setStatus(scope.row.id)">
              {{ scope.row.status == '1' ? '禁用' : '启用' }}
            </el-button>
            <el-button type="text" @click="del(scope.row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="page.page"
        :page-sizes="[1, 2, 5, 10, 20]"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <add ref="add" :modeSon="modeFather"></add>
  </div>
</template>
<script>
import {
  enterpriseList,
  enterpriseStatus,
  enterpriseRemove
} from '@/api/business.js'
import add from './components/add.vue'
export default {
  components: {
    add
  },
  data () {
    return {
      modeFather: 'add',
      page: {
        page: 1,
        limit: 1,
        total: 1
      },
      form: {
        eid: '',
        name: '',
        username: '',
        status: '',
        page: ''
      },
      list: [],
      options: [
        {
          value: 1,
          label: '启用'
        },
        { value: 0, label: '禁用' }
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await enterpriseList({ ...this.page, ...this.form })
      this.list = res.data.data.items
      window.console.log('企业列表：', res)
      // this.tableData = res.data.data.items
      this.page.total = res.data.data.pagination.total
    },
    search () {
      // this.page.page = 1
      this.getData()
    },
    sizeChange (size) {
      this.page.limit = size
      // 页容量改变时最好都回到第一页
      this.page.page = 1
      this.getData()
    },
    pageChange (page) {
      this.page.page = page
      this.getData()
    },
    add () {
      this.modeFather = 'add'
      this.$refs.add.isShow = true
    },
    edit (row) {
      this.modeFather = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.isShow = true
    },
    reset () {
      this.$refs.form.resetFields()
      this.form = {
        eid: '',
        name: '',
        username: '',
        status: ''
      }
      this.search()
    },
    setStatus (id) {
      enterpriseStatus({ id }).then(() => {
        this.$message.success('设置状态成功')
        // 刷新数据
        this.getData()
      })
    },
    del (id) {
      enterpriseRemove({ id }).then(() => {
        this.$message.success('删除成功')
        // 刷新数据
        this.search()
      })
    }
  }
}
</script>
<style lang="scss">
.pagination {
  background-color: #fff;
  padding: 15px;
  text-align: center;
}
</style>
